<template>
  <div class="service-detail">
    <div class="banner container-fuild text-center">律师服务</div>
    <div class="container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>沈阳皇姑区个人债权转让 <i class="time">2021-08-30</i></span>
        </div>
        <template v-if="logined">
          <div class="card-container" >
            <div class="pull-left">
              <img src="../assets/img/laywer.png" alt="">
              <span>登录后才可以查看发布 方的具体联系方式哦！</span>
            </div>
            <div class="pull-middle">
              <p>债权人名称/机构名称：<span>王莉</span></p>
              <p>债权金额：<span>20万元</span></p>
              <el-popover
                placement="right"
                width="400"
                trigger="click">
                <p style="border-bottom: 1px solid #ccc; padding-bottom: 10px;">需要支付费用80元，支付后查看更多债权数据信息!</p>
                <div class="pay-box">
                  <div @click="viewPay">
                    <img src="../assets/img/laywer.png" alt="">
                    <span>微信支付</span>
                  </div>
                  <div>
                    <img src="../assets/img/laywer.png" alt="">
                    <span>支付宝支付</span>
                  </div>
                </div>
                <el-button type="primary" slot="reference">查看详情</el-button>
              </el-popover>
              <!-- <el-button type="primary" @click="viewDetail">查看详情</el-button> -->
              <span>注：支付费用后可查看详情 </span>
            </div>
            <div class="pull-right">
              <p>发布时间：<span>2021-08-15</span></p>
              <p>债务人所在地址：<span style="color: red;">辽宁省沈阳市</span></p>
            </div>
          </div>
        </template>

        <div class="card-container" v-else>
          <div class="pull-left">
            <img src="../assets/img/laywer.png" alt="">
            <span>登录后才可以查看发布 方的具体联系方式哦！</span>
          </div>
          <div class="pull-middle">
            <p>债权人名称/机构名称：<span>王莉</span></p>
            <p>债权金额：<span>20万元</span></p>
            <el-popover
              placement="right"
              width="400"
              trigger="click">
              <p style="border-bottom: 1px solid #ccc; padding-bottom: 10px;">需要支付费用80元，支付后查看更多债权数据信息!</p>
              <div class="pay-box">
                <div @click="viewPay">
                  <img src="../assets/img/laywer.png" alt="">
                  <span>微信支付</span>
                </div>
                <div>
                  <img src="../assets/img/laywer.png" alt="">
                  <span>支付宝支付</span>
                </div>
              </div>
              <el-button type="primary" slot="reference">查看详情</el-button>
            </el-popover>
            <!-- <el-button type="primary" @click="viewDetail">查看详情</el-button> -->
            <span>注：支付费用后可查看详情 </span>
          </div>
          <div class="pull-right">
            <p>发布时间：<span>2021-08-15</span></p>
            <p>债务人所在地址：<span style="color: red;">辽宁省沈阳市</span></p>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { WOW } from "wowjs";
export default {
  name: "ServiceDetail",
  data() {
    return {
      id: "",
      logined: false
    };
  },
  mounted() {
    this.id = this.$route.params.id || 123;
    var wow = new WOW();
    wow.init();
  },
  methods: {
    viewPay() {

    }
  }
};
</script>
<style scoped>
.banner {
  color: #fff;
  font-size: 30px;
  height: 300px;
  line-height: 150px;
  background-image: url("../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.container {
  margin: 40px auto;
}
.time {
  font-weight: 400;
  margin-left: 20px;
}
.card-container {
  display: flex;
  justify-content: space-between;
}
.pull-left {
  width: 120px;
  height: 200px;
  display: flex;
  flex-direction: column;
}
.pull-left img {
  width: 100%;
  height: 160px;
}
.pull-left span {
  font-weight: 400;
  color: #333;
  font-size: 12px;
  margin-top: 5px;
}
.pull-middle {
  display: flex;
  flex-direction: column;
}
.pull-middle span {
  margin-top: 10px;
}
.pay-box {
  width: 160px;
  margin: 10px auto;
  height: 80px;
  display: flex;
  justify-content: space-between;
}
.pay-box img {
  width: 40px;
  height: 40px;
}
.pay-box span {
  color: #ccc;
  font-size: 12px;
}
</style>
